import { type ClassValue, cn } from "common-web";
import type { ReactNode } from "react";
import theme from "@/common/theme";

type PanelProps = {
  title?: ReactNode;
  children: ReactNode;
  className?: ClassValue;
  style?: React.CSSProperties | undefined;
  titleClassName?: ClassValue;
  titleStyle?: React.CSSProperties | undefined;
  bodyClassName?: ClassValue;
  bodyStyle?: React.CSSProperties | undefined;
};

/**
 * 嵌套组件示例
 */
export default function Panel(p: PanelProps) {
  return (
    <div className={cn("border", [theme.borderRadius, theme.borderColor, theme.shadow], p.className)} style={p.style}>
      {p.title && (
        <div
          className={cn(
            "border-b px-4 py-2 h-12 flex items-center",
            [theme.borderColor, theme.borderTopRadius],
            p.titleClassName,
          )}
          style={p.titleStyle}
        >
          {p.title}
        </div>
      )}
      <div className={cn("px-4 py-2", theme.borderBottomRadius, p.bodyClassName)} style={p.bodyStyle}>
        {p.children}
      </div>
    </div>
  );
}
